<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../CSS/introduction_style.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
    <link href="../CSS/bootstrap.min.css" rel="stylesheet">
    <link href="../CSS/bootstrap-theme.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
    <link href="../css/swiper.min.css" rel="stylesheet">
  
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

    <title>
        tabs</title>
    <style>


        .swiper-button-prev,
        .swiper-container-rtl .swiper-button-next {
            background-image: url(../images/arrow-left.png);
            width: 80px;
            height: 80px;

        }

        .swiper-button-next,
        .swiper-container-rtl .swiper-button-prev {
            background-image: url(../images/arrow-right.png);
            width: 80px;
            height: 80px;

        }
    </style>
</head>

<body>
    <canvas id="fireworks" style="position:fixed;left:0;top:0;pointer-events:none;"></canvas>
    <header class="wow slideInUp" data-wow-duration="2.4s">
        <div class="content_box">
            <div class="text_row">
                <nav>
                    <div id="menu-toggle">
                        <div class="hamburger">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                        </div>
                        <div class="cross">
                            <span class="line"></span>
                            <span class="line"></span>
                        </div>
                    </div>
                    <ul class="main-nav">
                        <li><a href="#">主页</a></li>
                        <li><a href="#clock">时间</a></li>
                        <li><a href="#gallery-section">相簿</a></li>
                        <li><a href="#about">关于</a></li>
                        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=737461472&site=qq&menu=yes">联系我</a></li>
                    </ul>
                </nav>
                <p class="row1">
                    Welcome
                </p>
                <p class="row2">
                    我的站点
                </p>
                <p class="row3">
                    静态页面
                </p>


                <a href="myblog.html" class="btn btn-lg btn-primary">To my Blog+</a>

                <ul class="social-links">
                    <li class="social_links_head">/ to Know me /</li>
                    <li>
                        <a href="#">
                            <i class="fab fa-github"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fab fa-weibo"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fab fa-weixin"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fab fa-twitch"></i>
                        </a>
                    </li>
                </ul>
            </div>


        </div>
        </div>
    </header>

    <section class="wow slideInLeft">
        <section class="case-study">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="sub-heading">Study History</h4>
                        <h1 class="heading purple"><span class="purple">学习经历</span> ： <br>邮电大学</h1>
                        <!-- Swiper -->
                        <div class="swiper-container client-swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide client-box">
                                    <img src="../images/pc.jpg" class="client-logo">
                                    <h3 class="text-left title">计算机科学系</h3>
                                    <p class="text-left tag">Department of Computer Science in University</p>
                                    <p class="text-left"><a
                                            href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF%E7%B3%BB/11044979?fr=aladdin">了解更多
                                            &#8594;</a></p>
                                </div>
                                <div class="swiper-slide client-box">
                                    <img src="../images/javascriptlogo.jpg" class="client-logo">
                                    <h3 class="text-left title">邮电大学</h3>
                                    <p class="text-left tag">Sichuan Post and Telecomution University</p>
                                    <p class="text-left"><a href="#">了解更多
                                            &#8594;</a></p>
                                </div>
                                <div class="swiper-slide client-box">
                                    <img src="../images/javascriptlogo.jpg" class="client-logo">
                                    <h3 class="text-left title">JavaScript</h3>
                                    <p class="text-left tag">JavaScript是一种具有函数优先的轻量级的编程语言。</p>
                                    <p class="text-left"><a href="https://www.w3school.com.cn/js/index.asp">了解更多
                                            &#8594;</a></p>
                                </div>

                            </div>

                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
    </section>



    <div class="leftNav-item">
        <ul>
            <li>
                <i class="fa fa-location-arrow"></i>

            </li>
            <li title="在线客服">
                <i class="fab fa-qq"></i>
                <a href="#" class="rota">QQ</a>
            </li>

            <li>
                <i class="fab fa-weixin"></i><a href="#" class="rota">微信</a>
            </li>
            <li title="返回顶部" class="for-top">
                <i class="fa fa-arrow-up"></i>
                <a href="javascript:;" class="rota">去顶部</a>
            </li>
        </ul>
    </div>

    <!-- <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="1">
        <div class="gallery-section" id="gallery-section">
            <div class="inner-width">
                <h1>白色相簿</h1>
                <div class="border"></div>
                <div class="gallery">
                    <a href="../images/71.jpeg" class="image">
                        <img src="../images/71.jpeg" alt="" />
                    </a>
                    <a href="../images/93.jpg" class="image">
                        <img src="../images/93.jpg" alt="" />
                    </a>
                    <a href="../images/104.jpg" class="image">
                        <img src="../images/104.jpg" alt="" />
                    </a>
                    <a href="../images/114.jpg" class="image">
                        <img src="../images/114.jpg" alt="" />
                    </a>
                    <a href="../images/156.jpg" class="image">
                        <img src="../images/156.jpg" alt="" />
                    </a>
                    <a href="../images/171.jpg" class="image">
                        <img src="../images/171.jpg" alt="" />
                    </a>
                    <a href="../images/264.png" class="image">
                        <img src="../images/264.png" alt="" />
                    </a>
                    <a href="../images/265.png" class="image">
                        <img src="../images/265.png" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </section> -->


    <div id="clock" class="wow rollIn">
        <h2>the time is now</h2>
        <div id="time">
            <div><span id="hours">00</span><span>Hours</span></div>
            <div><span id="minutes">00</span><span>Minutes</span></div>
            <div><span id="seconds">00</span><span>Seconds</span></div>
        </div>
    </div>

    <!-- <div class="wow zoomIn container-schooltool">
        <div class="school-study ">

            <div class="school-study-tt">学在生活</div>
            <hr \ style="height: 2px;background-color: mediumvioletred;width: 40px;">
            <div class="school-study-inner">
                <div class="content-1">
                    <div class="study-block" style="background-color: cornflowerblue;">
                        <p>HTML</p>
                        <a href="#">查看更多</a>
                    </div>
                </div>
                <div class="content-1">
                    <div class="study-block" style="background-color: cadetblue;">
                        <p>JAVASCRIPT</p>
                        <a href="#">查看更多</a>
                    </div>
                </div>

            </div>

            <div class="school-study-inner">
                <div class="content-1">
                    <div class="study-block" style="background-color: yellowgreen;">
                        <p>VUE</p>
                        <a href="#">查看更多</a>
                    </div>
                </div>
                <div class="content-1">
                    <div class="study-block" style="background-color: mediumturquoise;">
                        <p>BOOTSTRAP</p>
                        <a href="#">查看更多</a>
                    </div>
                </div>

            </div>
        </div>

        <div class="school-website">
            <div class="school-study-tt">相关网站</div>
            <hr \ style="height: 2px;background-color: mediumvioletred;width: 40px;">
            <div class="school-right-website">
                <div class="website-imgs">
                    <div class="img"><img src="../images/li1.jpg"></div>
                    <div class="img"><img src="../images/li2.jpg"></div>
                    <div class="img"><img src="../images/li3.jpg"></div>
                    <div class="img"><img src="../images/li4.jpg"></div>
                </div>
                <div class="website-url">
                    <div class="website-url-title"><a href="#">
                            <p>“不忘初心，牢记使命”主题</p>
                        </a></div>
                    <div class="website-url-title"><a href="#">
                            <p>“不忘初心，牢记使命”主题</p>
                        </a></div>
                    <div class="website-url-title"><a href="#">
                            <p>“不忘初心，牢记使命”主题</p>
                        </a></div>
                    <div class="website-url-title"><a href="#">
                            <p>“不忘初心，牢记使命”主题</p>
                        </a></div>
                </div>
            </div>

        </div>
    </div>
   
    <div class="wow lightSpeedIn Fold_photo">
        <div class="bg bg-box-1"></div>
        <div class="bg bg-box-2"></div>
        <div class="bg bg-box-3"></div>
        <div class="bg bg-box-4"></div>
        <div id="wrap">
            <ul>
                <li>
                    <div class="text">
                        <p>尼尔机械纪元</p>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <p>尼尔机械纪元2</p>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <p>尼尔机械纪元3</p>
                    </div>
                </li>
                <li class="curr">
                    <div class="text">
                        <p>尼尔机械纪元4</p>
                    </div>
                </li>
            </ul>
        </div>

    </div>
-->
    <div class="footer2" >


        
                    <h1>XICP备111111号</h1>
              

            </div>
         
        </div>
    </div> 
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="../js/jquery.counterup.min.js"></script>
    <script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
    <script src="../js/initIntro.js"></script>
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 1,
            mobile: true,
            live: true
        });
        wow.init();
    </script>
    <script>
        function clock() {
            var hours = document.getElementById('hours');
            var minutes = document.getElementById('minutes');
            var seconds = document.getElementById('seconds');

            var h = new Date().getHours();
            if (h < 10) {
                h = "0" + h;
            }
            var m = new Date().getMinutes();
            if (m < 10) {
                m = "0" + m;
            }
            var s = new Date().getSeconds();
            if (s < 10) {
                s = "0" + s;
            }
            hours.innerHTML = h;

            minutes.innerHTML = m;
            seconds.innerHTML = s;

        }
        var interval = setInterval(clock, 1000);
    </script>
    <script>
        $('.gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled: true
            }
        })
    </script>

    <script>
        var swiper1 = new Swiper('.client-swiper', {
            slidesPerView: 3,
            paginationClickable: true,
            loop: true,
            autoplay: 2000,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 60,
            // Responsive breakpoints
            breakpoints: {
                // when window width is <= 320px
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    pagination: '.swiper-pagination'
                },
                // when window width is <= 480px
                480: {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                // when window width is <= 640px
                640: {
                    slidesPerView: 1,
                    spaceBetween: 30
                }
            }
        });
        // Initialize Testimonial Swiper
        var swiper2 = new Swiper('.testimonial-swiper', {
            slidesPerView: 3,
            //分页器
            pagination: '.swiper-pagination',
            //分页器点击
            paginationClickable: true,
            //间隔空间
            spaceBetween: 30,
            grabCursor: true,
            loop: true,
            freeMode: true,
            breakpoints: {
                // when window width is <= 320px
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                // when window width is <= 480px
                480: {
                    slidesPerView: 1,
                    spaceBetween: 10
                },
                // when window width is <= 640px
                640: {
                    slidesPerView: 1,
                    spaceBetween: 10
                }
            }
        });
    </script>
    <script>
        // Counterup
        $('.counter').counterUp({
            time: 1000
        });

        // Main Navigation
        $('#menu-toggle').click(function () {
            $(this).toggleClass('open'),
                $('.main-nav').toggleClass('show-it');
        })
    </script>
    <script type="text/javascript" src="../js/click.js"> </script>
    <script>
        function setlayer(alias, str, icon) {
            var html = "";
            if (alias == "text") {
                html += "<div class=\"text-item\">";
                html += "<span>";
                html += "<i class=\"" + icon + "\"></i>" + str + "</span>";
                html += "</div>";
            } else {
                html += "<div class=\"img-item\">";
                html += "<img src=\"" + str + "\">";
                html += "</div>";
            }
            return html;
        }
        $(function () {
            $(".leftNav-item li").hover(function (e) {
                var alias = $(this).attr("lay-data");
                var str = $(this).attr("data-fooc");
                var icon = $(this).children("i").attr("class");
                if (!alias) {
                    return false;
                }
                $(this).append(setlayer(alias, str, icon));
                $(this).children("div").show(300);
            }, function (e) {
                $(this).children("div").remove();
            });
            $(window).scroll(function () {
                var scrollTop = $(document).scrollTop();
                if (scrollTop >= 240) {

                    $(".for-top").show();
                } else {
                    $(".for-top").hide();
                }
            });
            $(".for-top").click(function () {
                $('html,body').animate({
                    scrollTop: 0
                }, 700);
            })
        })</script>

    <script>
        !function () { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t.length, i = t[o - 1]; return { l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99) } } function o() { a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function i() { r.clearRect(0, 0, a, c); var n, e, t, o, m, l; s.forEach(function (i, x) { for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++)n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke())) }), x(i) } var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"), x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) { window.setTimeout(n, 1e3 / 45) }, w = Math.random, y = { x: null, y: null, max: 2e4 }; m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o, window.onmousemove = function (n) { n = n || window.event, y.x = n.clientX, y.y = n.clientY }, window.onmouseout = function () { y.x = null, y.y = null }; for (var s = [], f = 0; d.n > f; f++) { var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1; s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 }) } u = s.concat([y]), setTimeout(function () { i() }, 100) }();  </script>

</body>

</html>